<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>每日任务执行</title>
    <script>
        function readJson() {
            /*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
            let url = "step_data.json"
            let request = new XMLHttpRequest();
            request.open("get", url);/*设置请求方法与路径*/
            request.send(null);/*不发送数据到服务器*/
            request.onload = function () {/*XHR对象获取到返回信息后执行*/
                if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                    let json = JSON.parse(request.responseText);
                    for (let i = 0; i < json.length; i++) {
                        console.log(json[i].name);
                    }
                    console.log(json);
                }
            }
        }

        function outTest() {
            console.log("out")
        }
    </script>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
</head>
<body>
<!--<script src="https://unpkg.com/vue@3"></script>-->

<div id="app">
    <div>
        <el-container>
            <el-aside width="700px">
                Aside
            </el-aside>
            <el-container>
                <el-header>
                    <el-row>
                        <el-col>
                            场景：
                        </el-col>
                    </el-row>
                </el-header>
                <el-main style="padding-top: 0;">
                    <div style="padding-left: 2px">
                        <el-image :src="imgUrl" style="width: 450px; height: 800px"/>
                    </div>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>
</div>

<script>
    const App = {
        data() {
            return {
                imgUrl: './img/home.png',
                imgUrls: [
                    {
                        lable: '首页',
                        value: './img/home.png'
                    }
                ]
            }
        },
        methods: {
            test() {
                console.log('test')
            },
            readJson() {
                /*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
                let url = "step_data.json"
                let request = new XMLHttpRequest();
                request.open("get", url);/*设置请求方法与路径*/
                request.send(null);/*不发送数据到服务器*/
                request.onload = function () {/*XHR对象获取到返回信息后执行*/
                    if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                        let json = JSON.parse(request.responseText);
                        for (let i = 0; i < json.length; i++) {
                            console.log(json[i].name);
                        }
                        console.log(json);
                    }
                }
            }
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>

</body>

</html>